<template>
  <div class="assignment" style="">
    <div
      class="Overall"
      :style="{ 'border-left': formatBorder(deviceRelate.status) }"
      v-for="deviceRelate in deviceList"
      :key="deviceRelate.id"
    >
      <!-- v-for="(deviceRelate) in deviceList" :key="deviceRelate.id" -->
      <div
        class="state"
        :style="{ 'background-color': formatStaeColor(deviceRelate.status) }"
      >
        <div class="stateMsg">
          <svg-icon
            class="empty"
            :icon-class="formatIclass(deviceRelate.status)"
          />
          <div
            class="stateText"
            :style="{ color: formatTextcolor(deviceRelate.status) }"
          >
            {{ formatText(deviceRelate.status) }}
          </div>
          <div class="release">
            <svg-icon
              class="arrow-watch"
              :icon-class="formatArrow(deviceRelate.status)"
            ></svg-icon
            >发布时间 ：{{ formatDateT(deviceRelate.releasedDate) }}
          </div>
          <div class="allocation">
            <svg-icon
              class="arrow-watch"
              :icon-class="formatWatches(deviceRelate.status)"
            ></svg-icon
            >分配时间 ：{{ formatDateT(deviceRelate.activeDate) }}
          </div>
        </div>
      </div>

      <div class="Information">
        <div class="layout" v-if="deviceRelate.device">
          <img
            class="deviceImg"
            :src="deviceRelate.device.deviceType.imageUrl | filtersFileUrl()"
          />
          <div class="deviceName">设备：{{ deviceRelate.device.comments }}</div>
          <div class="deviceDescribe">{{ deviceRelate.device.comments }}</div>
        </div>
        <div class="layout" v-else>
          <svg-icon class="emptypicture" icon-class="emptypicture" />
          <div class="notYet">设备暂无</div>
        </div>

        <div class="layout" v-if="deviceRelate.customer">
          <img
            class="deviceImg"
            :src="deviceRelate.customer.imageUr | filtersFileUrl()"
          />
          <div class="deviceName">用户：{{ deviceRelate.customer.name }}</div>
          <div class="deviceDescribe">
            {{ deviceRelate.customer.description }}
          </div>
        </div>
        <div class="layout" v-else>
          <svg-icon class="emptypicture" icon-class="emptypicture" />
          <div class="notYet">用户暂无</div>
        </div>

        <div class="layout" v-if="deviceRelate.area">
          <img
            class="deviceImg"
            :src="deviceRelate.area.imageUrl | filtersFileUrl()"
          />
          <div class="deviceName">站点：{{ deviceRelate.area.name }}</div>
          <div class="deviceDescribe">{{ deviceRelate.area.description }}</div>
        </div>
        <div class="layout" v-else>
          <svg-icon class="emptypicture" icon-class="emptypicture" />
          <div class="notYet">站点暂无</div>
        </div>

        <div class="layout" v-if="deviceRelate.asset">
          <img
            class="deviceImg"
            :src="deviceRelate.asset.imageUrl | filtersFileUrl()"
          />
          <div class="deviceName">网关：{{ deviceRelate.asset.name }}</div>
          <div class="deviceDescribe">{{ deviceRelate.asset.token }}</div>
        </div>
        <div class="layout" v-else>
          <svg-icon class="emptypicture" icon-class="emptypicture" />
          <div class="notYet">网关暂无</div>
        </div>
      </div>
    </div>
    <!-- <Pagination /> -->
  </div>
</template>

<script>
import "../../assets/style/deviceCss/deviceAssignment.css";
// import Pagination from "@/views/common/pagination";
import {
  formatBorder,
  formatIclass,
  formatTextcolor,
  formatText,
  formatArrow,
  formatWatches,
} from "@/views/common/js/device/assignments.js";
export default {
  components: {
    // Pagination
  },
  props: {
    deviceList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      condition: true,
      noEquipment: false,
      border: "",
      iclass: "",
      textcolor: "",
    };
  },
  computed: {},
  mounted() {},
  methods: {
    formatBorder(status) {
      return formatBorder(status);
    },
    formatIclass(status) {
      return formatIclass(status);
    },
    formatTextcolor(status) {
      return formatTextcolor(status);
    },
    formatText(status) {
      return formatText(status);
    },
    formatArrow(status) {
      return formatArrow(status);
    },
    formatWatches(status) {
      return formatWatches(status);
    },
    formatStaeColor(status) {
      if (status === "Active") {
        return "#F1F5EF";
      } else if (status === "Missing") {
        return "#FBF2F2";
      } else {
        return "#F2F2F2";
      }
    },
    formatDateT(date) {
      if (date === undefined) {
        return "N/A";
      }
      return this.$moment(new Date(date)).format("YYYY-MM-DD H:mm:ss");
    },
  },
};
</script>

<style scoped>
.assignment {
  overflow: auto;
}
</style>>
